/**
 * Created by zhangqiang on 16/12/19.
 */

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    fmt = 'yyyy-MM-dd hh:mm:ss',
    imgPre = '../public/images/finger/';

const waitForSend = 'waitForSend';

const Product = RC({
    getInitialState() {
        return {}
    },
    componentDidMount() {

    },
    render() {
        let data = this.props.data,
            type = '',
            btns = [],
            color = '';

        switch (data.status) {
            case waitForSend:
                type = '2600';
                btns = ['确定'];
                color = 'pink';
                break;

            default:
                type = '待处理';
                btns = ['待处理', '处理'];
                color = '';
                break;
        }
        console.log(btns)
        let btnList = btns.map((btn, i)=> {
            return <span className={"btn btn-send " + (btns.length > 1 && i == 0 ? 'grey' : '')}>{btn}</span>
        })
        return <div className="product">
            <div className="mui-table-view-cell prod">
                <p className="flex-item prod-img">
                    <img src={imgPre + data.img} alt=""/>
                </p>
                <div className="flex-item prod-detail">
                    <p>{data.productName}</p>
                </div>
                <p className="flex-item">
                    <span className={"status wait-send " + color}>{'￥'+type}</span>
                    <p className="count">×1</p>
                </p>
            </div>
            <div className="mui-table-view-cell flex date-info">
                <p className="flex-item right">
                    <span>{'共' + data.count + '件商品'}</span>
                    <span>合计：￥</span><span>{data.sum}</span>
                </p>
            </div>
            <div className="mui-table-view-cell btns">
                {
                    // <span className="btn btn-ignore">忽略</span>
                    // <span className="btn btn-cancel">取消订单</span>
                    // <span className="btn btn-reply">回复</span>
                    // <span className="btn btn-confirm">确认</span>
                    // <span className="btn btn-receipt">收货</span>
                    // <span className="btn btn-deal">处理</span>
                    // <span className="btn btn-dealing">待处理</span>
                }
                {

                }
                <div>
                    {btnList}
                </div>
            </div>
        </div>
    }
});

const Root = RC({
    getInitialState() {
        return {}
    },
    componentDidMount() {


    },
    render() {
        let data = [
                {
                    productName: '皇家富士苹果',
                    status: 'waitForSend',//0
                    count: '23.5',
                    sum: '23',
                    img: 'apple.jpg',
                }, {
                    productName: '皇家富士苹果',
                    status: 'waitForSend',//0
                    count: '23.5',
                    sum: '23',
                    img: 'apple.jpg',
                }, {
                    productName: '皇家富士苹果',
                    status: 'waitForSend',//0
                    count: '23.5',
                    sum: '23',
                    img: 'apple.jpg',
                }, {
                    productName: '皇家富士苹果',
                    status: 'waitForSend',//0
                    count: '23.5',
                    sum: '23',
                    img: 'apple.jpg',
                }, {
                    productName: '皇家富士苹果',
                    status: 'waitForSend',//0
                    count: '23.5',
                    sum: '23',
                    img: 'apple.jpg',
                },
            ],
            list = data.map((info, i)=> {
                return <Product data={info} key={i}/>
            })

        return <div className="all-order">
            {list}
        </div>
    }
});

lf.appJs.getUser(function (user) {
    R.render(<Root user={user}/>, document.getElementById('root'),
        function () {
            $('#root').css({
                'background-color': '#ededed',
                'margin-bottom': '.3rem' //与底部撑开
            });
        }
    );
});